<template>
  <!-- <div style="width: 100%;height: 100%;margin-top: 20px;">

  </div> -->
  <div style="height: 100%;">
    <el-card class="update-log" style="height: 100%;background-color: #0C2136;border-color: #123355;">
      <div slot="header" class="clearfix">
        <span style="color: #ffffff;">记录统计</span>
      </div>
      <div class="body" style="height: 100%;">
      	<div class="echart" id="mychart" style="width: 100%;height: 100%;"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import {
    countLogTypeByMonth
  } from "@/api/lock/logs";
  export default {
    data() {
      return {
        myChart: null,
        list: [],
        monthData: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
        countData: [100,50,0,0,0,0,0,0,0,0,0,0]
      }
    },
    created() {


    },
    mounted() {
      this.$nextTick(() => {
        this.init()
      })
      // 添加 resize 事件监听器
          window.addEventListener('resize', this.resizeChart);
    },
      beforeDestroy() {
        // 移除 resize 事件监听器
        window.removeEventListener('resize', this.resizeChart);
      },
    methods: {
      init() {
        // countLogTypeByMonth().then(response => {
        //   this.list = response.data;
        //   this.list.forEach(item => {
        //     this.monthData.push(item.month + '月')
        //     this.countData.push(item.count)
        //   })
          var option = {
              backgroundColor: '#0C2136',
                  grid: {
                      left: '5%',
                      right: '10%',
                      top: '20%',
                      bottom: '15%',
                      containLabel: true
                  },
                  tooltip: {
                      trigger: 'axis',
                        axisPointer: {
                          type: 'cross',
                          label: {
                            backgroundColor: '#6a7985'
                          }
                        }
                  },
                  legend: {
                      show: true,
                      x: 'center',
                      y: '5',
                      icon: 'stack',
                      itemWidth: 10,
                      itemHeight: 10,
                      textStyle: {
                          color: '#1bb4f6'
                      },
                      data: ['年度开锁记录','年度电表记录','年度水表记录','年度燃气记录']
                  },
                  xAxis: [{
                      type: 'category',
                      boundaryGap: false,
                      axisLabel: {
                          color: '#1bb4f6'
                      },
                      axisLine: {
                          show: true,
                          lineStyle: {
                              color: '#397cbc'
                          }
                      },
                      axisTick: {
                          show: false,
                      },
                      splitLine: {
                          show: false,
                          lineStyle: {
                              color: '#195384'
                          }
                      },
                      data: this.monthData
                  }],
                  yAxis: [{
                          type: 'value',
                          name: '',
                          min: 0,
                          max: 1000,
                          axisLabel: {
                              formatter: '{value}',
                              textStyle: {
                                  color: '#2ad1d2'
                              }
                          },
                          axisLine: {
                              lineStyle: {
                                  color: '#27b4c2'
                              }
                          },
                          axisTick: {
                              show: false,
                          },
                          splitLine: {
                              show: true,
                              lineStyle: {
                                  color: '#11366e'
                              }
                          }
                      },

                  ],
                  series: [
                      {
                        name: '年度开锁记录',
                        type: 'line',
                        color: 'rgb(128, 255, 165)',
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                          width: 1
                        },

                        data: [100, 932, 801, 964, 700,801 ,550,801, 932, 600, 464, 700, 900, 250]
                      },
                      {
                        name: '年度电表记录',
                        type: 'line',
                        color: 'rgb(255, 0, 0)',
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                          width: 1
                        },

                        data: [700, 500, 701, 864, 600,701 ,650,700, 732, 500, 864, 800, 410, 350]
                      },
                      {
                        name: '年度水表记录',
                        type: 'line',
                        color: 'rgb(170, 85, 255)',
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                          width: 1
                        },

                        data: [300, 222, 400, 350, 360,480 ,200,440, 400, 500, 480, 320, 480, 280]
                      },
                      {
                        name: '年度燃气记录',
                        type: 'line',
                        color: 'rgb(255, 170, 127)',
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                          width: 1
                        },
                        data: [200, 380, 300, 320, 340,400 ,120,280, 360, 330, 470, 466, 380, 240]
                      },
                    ]
              };

          this.myChart = echarts.init(document.getElementById("mychart"));
          this.myChart.setOption(option);

          // 调整图表大小以适应容器
          this.resizeChart();
        // })


      },
      resizeChart() {
            if (this.myChart) {
              this.myChart.resize(); // 调整图表大小
            }
          }
    }
  }
</script>

<style scoped lang="scss">
  .el-card ::v-deep .el-card__header {
    padding: 7px 15px 7px;
    background: linear-gradient(to bottom, #1B506E, #173F5A, #13324C);
    border-bottom: #123355;
  }
  .el-card ::v-deep .el-card__body {
    height: 100%;
  }
</style>
